<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛查成绩</title>
    <style>
        header{
            text-align: center;
            margin-top: 50px;
        }
        table{
            margin: 20px auto;
            min-width: 1000px;
            border-collapse: collapse;
            text-align: center;
        }
        table td,table th{
            border: 1px solid #666;
            padding: 5px 10px;
        }
        p{
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <header>
        <button class="btn1">按学号排序</button>
        <button class="btn2">筛选大于18岁的学生</button>
        <button class="btn3">找出第一个分数大于或等于 80的学生</button>
        <button class="btn4">求出第一名 信息</button>
        <button class="btn5">把所有学生的年龄都加1</button>
        <button class="btn6">按照成绩排名</button>
    </header>
    <table class="total">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <p>删选结果如下</p>
    <table class="new-list">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        let userList = [
            {num:'003',name:'小源',age:20,hoppy:'篮球、足球、乒乓球',score:59},
            {num:'004',name:'小李',age:19,hoppy:'js',score:30},
            {num:'001',name:'小明',age:22,hoppy:'html、css',score:80},
            {num:'002',name:'小红',age:17,hoppy:'篮球、乒乓球',score:70},
            {num:'006',name:'小杨',age:22,hoppy:'刷剧',score:85},
            {num:'005',name:'小张',age:24,hoppy:'打游戏',score:90}
        ]
        let totalTbody = document.querySelector('.total tbody');
        let newListTbody = document.querySelector('.new-list tbody');

        // 动态将数据放入表格,将这个功能封装为函数
        function makeTr(arr,tagDom){
            let tr = '';
            arr.forEach(function(v,i){
                tr += ` <tr>
                        <td>${v.num}</td>
                        <td>${v.name}</td>
                        <td>${v.age}</td>
                        <td>${v.hoppy}</td>
                        <td>${v.score}</td>
                    </tr> 
                `
            })
            tagDom.innerHTML = tr;
        };
        // 初始调用，将总表展示出来
        makeTr(userList,totalTbody);
        

        // 添加点击事件
        document.querySelectorAll('button').forEach(function(v,i){
            v.addEventListener('click',function(){
                // 每一次点击之前，都让原数组恢复至默认状态
                userList = [
                {num:'003',name:'小源',age:20,hoppy:'篮球、足球、乒乓球',score:59},
                {num:'004',name:'小李',age:19,hoppy:'js',score:30},
                {num:'001',name:'小明',age:22,hoppy:'html、css',score:80},
                {num:'002',name:'小红',age:17,hoppy:'篮球、乒乓球',score:70},
                {num:'006',name:'小杨',age:22,hoppy:'刷剧',score:85},
                {num:'005',name:'小红',age:24,hoppy:'打游戏',score:90}
                ]
                // 判断点击的是哪个按钮
                if (i === 0) {
                    // 按学号排序
                    userList.sort(function(a,b){
                        return Number(a.num) - Number(b.num)
                    });
                    makeTr(userList,newListTbody);   
                }else if(i === 1){
                    // 筛选大于18岁的学生
                    let newUserList = userList.filter(function(v,i){
                        return v.age > 18;
                    });
                    makeTr(newUserList,newListTbody); 
                }else if(i === 2){
                    // 找出第一个分数大于或等于 80的学生
                    let student =  userList.find(function(v,i){
                        return v.score >= 80;
                    });
                    student = [student];
                    makeTr(student,newListTbody); 
                }else if(i === 3){
                    // 求出第一名 信息
                    let max = userList[0].score;
                    let maxStudent;
                    userList.forEach(function(v,i){
                        if (v.score > max) {
                            max = v.score;
                            maxStudent = v;
                        };
                    });
                    maxStudent = [maxStudent];
                    makeTr(maxStudent,newListTbody); 
                }else if(i === 4){
                    //所以人年龄+1,返回一个新数组
                    let newUserList = userList.map(function(v,i){
                        v.age += 1;
                        return v;
                    });
                    makeTr(newUserList,newListTbody); 
                }else if(i === 5){
                    // 按照成绩排名
                    userList.sort(function(a,b){
                        return b.score - a.score;
                    });
                    makeTr(userList,newListTbody); 
                }
                });
        })
    </script>


</body>
</html>